[開発プレビュー版] ストレージバケットの操作インターフェースを提供できる Amplify UI コンポーネント「Storage Browser for S3」がアナウンスされたので使ってみた

いわさ

2024.09.06

いわさです。

今朝「Storage Browser for S3」というものがアナウンスされました。

こちらはウェブアプリケーションに対して、ユーザーが S3 のデータをダウンロード・アップロードなどを簡単に行うための機能を提供する Amplify UI の開発中のコンポーネントで、React で使うことが出来ます。

ちょうど Amplify + React で色々と構築・検証を行う機会があり、直近 S3 のブラウジングは特に不要だったのですが、組み込みが簡単だったので試してみました。

実装してみる

本アナウンスの詳細情報や手順は本日時点ではまだ公式ドキュメントには記載されておらず、以下の Issue で導入手順を確認することが出来ます。

今回のコンポーネントとは別で既存のストレージ機能を使ってバケットを構成しておきます。

/amplify/storage/resource.ts

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
    name: 'hogeStorage',
    access: (allow) => ({
      'public/*': [
        allow.guest.to(['read']),
        allow.authenticated.to(['read', 'write', 'delete']),
      ],
      'protected/{entity_id}/*': [
        allow.authenticated.to(['read']),
        allow.entity('identity').to(['read', 'write', 'delete'])
      ],
      'private/{entity_id}/*': [
        allow.entity('identity').to(['read', 'write', 'delete'])
      ]
    })
  });

今回の機能は Amplify UI によるものなので、バックエンドリソースは追加の設定は不要です。
Storage Browser コンポーネントを追加でインストールしフロントエンドで使用します。

% npm i --save @aws-amplify/ui-react-storage@storage-browser aws-amplify@storage-browser
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: amplify-vite-react-template@0.0.0
npm warn Found: aws-amplify@6.5.2
npm warn node_modules/aws-amplify
npm warn   peer aws-amplify@"^6.3.2" from @aws-amplify/ui@6.1.0
npm warn   node_modules/@aws-amplify/ui
npm warn     @aws-amplify/ui@"6.1.0" from @aws-amplify/ui-react@6.2.0
npm warn     node_modules/@aws-amplify/ui-react
npm warn     1 more (@aws-amplify/ui-react-core)
npm warn   4 more (@aws-amplify/ui-react, @aws-amplify/ui-react-core, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional aws-amplify@"^6.3.2" from @aws-amplify/ui-react@6.2.0
npm warn node_modules/@aws-amplify/ui-react
npm warn   @aws-amplify/ui-react@"^6.2.0" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency

added 5 packages, changed 13 packages, and audited 1347 packages in 13s

166 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
%

/src/App.tsx

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { useEffect, useState } from "react";
import { StorageBrowser } from '@aws-amplify/ui-react-storage';

const client = generateClient<Schema>();

function App() {
  const defaultPrefixes = [
    'public/',
    (identityId: string) => `protected/${identityId}/`,
    (identityId: string) => `private/${identityId}/`,
  ];

  return (
    <Authenticator>
      {({ signOut }) => (
        <StorageBrowser defaultPrefixes={defaultPrefixes} />
      )}
    </Authenticator>
  );
}

export default App;

Storage Browser は IAM Identity Center やカスタム認証、デフォルトの Cognito 認証など様々な認証方法がサポートされていますが、本日は Amplify デフォルトの Cognito 認証を使います。
一番簡単です。

動作チェック

上記の実装で既に使えるので、サンドボックス上でストレージのバックエンドリソースがデプロイされていれば後はローカル実行するだけで OK です。

認証かけているのでユーザープール上の適当なユーザーでサインインしましょう。

スタイルがだいぶ崩れていますが、何か表示されました。
バックエンドにデプロイされた S3 バケットが参照されている雰囲気です。
最近 Amplify のアップデートでマルチバケットがサポートされていた気がしますが、今回特にバケットの指定をしていないですね。そのあたりの指定方法が気になります。

上記を見てみるとプレフィックスまで表示されていますが、実際には S3 バケット上にまだオブジェクトは存在しません。

アップロードしてみる

何か適当なオブジェクトをアップロードしてみたいと思います。
Public フォルダに移動し、「Upload Files」からアップロードを行います。
このあたりの UI のカスタマイズ方法（例えば日本語化）も気になりますね。

ローカルから適当なファイルを指定してアップロードしてみました。
ちなみに Start ボタンを押すまでアップロードされません。

Start ボタンを押すとアップロードが開始されました。
アップロード状況は Progress で確認することが出来ます。

S3 バケット側を確認してみるとオブジェクトがアップロードされていることが確認出来ました。特に難しい設定はしておらずフロントエンド側で Amplify UI コンポーネントを配置しただけですが、ユーザーが S3 バケット内で色々操作することが出来ていますね。

別ユーザーでオブジェクトを確認してみる

先ほどのユーザーに Public と Private のプレフィックスが存在していました。
フロントエンドでプレフィックスを指定しているのですが Private についてはユーザーの情報を使用しています。

別のユーザーでサインインしてみると、先程のユーザーのプレフィックス内は確認することが出来ませんでした。

逆に自分の Private プレフィックス内にオブジェクトをアップロードしてみましょう。

無事アップロード出来たのですが、バケット内のオブジェクトは次のように Public が共通、Private がユーザー別に格納される形になっています。

% aws s3 ls s3://amplify-amplifyvitereactt-hogestoragebucket4cb73b1-wm01thkhv2uj --recursive
2024-09-06 13:44:55       7815 private/ap-northeast-1:8036753d-d02b-c516-fd1c-391b39c833e2/bbb.xml
2024-09-06 13:28:01       7815 private/ap-northeast-1:8036753d-d06a-c0fb-00c8-533d41a53432/iwasaaws1-68286-metadata.xml
2024-09-06 13:26:41       7815 public/iwasaaws1-68286-metadata.xml